﻿<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Netty WebSocket 聊天</title>  
<style>
	body,td,th {font-family: Verdana, Arial, Helvetica, sans-serif;color: #1d1007;}
	#friends div{background: deepskyblue;}
	.limouseover{
		background:#FFE4E1;
	}
	.windowTalkmover{
		background:#00B2EE;
	}
	.selected{background:#FFB6C1;border-radius:4px;}
	.online{background:deepskyblue;}
	#banana a{
	  text-decoration:none;
	  color:white;
	}
	.windowTitle{
		float: right;
		line-height:40px;
		text-align: center;
		width: 100px;
		border: solid 0px;
		margin: 1px 0px;
		text-overflow: ellipsis;
		overflow: hidden;
		cursor: default;
		white-space: pre;
		max-height: 40px;
		color:white;
		border-radius: 10px;
	}
	.winTitleSelected{
		background: dodgerblue;
	}
	#groups li{
		border-radius: 6px;
		padding: 4px 0px;
		margin: 1px 0px;
		cursor: default;
	}
	#friends li{
		text-overflow: ellipsis;
		overflow: hidden;
		border-radius: 6px;
		padding: 4px 0px;
		margin: 1px 0px;
		cursor: default;
	}
	.circle{
		width: 24px;
		height: 24px;
		background-color: #FFB6C1;
		border-radius: 12px;
		text-align: center;
		color: white;
		float: left;
		margin: 0px 2px;
	}
	#windowTitle .title{
		text-align: center;
		float: left;
		height: 24px;
		line-height: 24px;
	}
	
	#banana .msg{
		word-break: break-all;
		float:left;
	}
	#banana .msgR{
		word-break: break-all;
		float:right;
	}
	#banana .msgTitle{
		color:white;
		float:left;
		border-radius: 10px;
		background: #FFB6C1;
		width: 20px;
		height: 20px;
		text-align: center;
		margin-right:2px
	}
	#banana .msgCentent{
		color:white;
		float:left;
		border-radius: 5px;
		background: lightgray;
		line-height:30px;
		text-align: left;
		padding: 5px;
	}
	
	#banana .msgTitleR{
		color:white;
		float:right;
		border-radius: 10px;
		background: #FFB6C1;
		width: 20px;
		height: 20px;
		text-align: center;
		margin-left:2px
	}
	#banana .msgCententR{
		color:white;
		float:right;
		border-radius: 5px;
		background: dodgerblue;
		line-height:30px;
		text-align: left;
		padding: 5px;
	}
	
	/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 2px;  
    height: 16px;  
    background-color: #F5F5F5;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    background-color: #555;  
} 

	
</style>
</head>  
<script src="jquery.1.11.3.js" type="text/javascript"></script>  
<script src="map.js" type="text/javascript"></script>  
<script src="jquery-ui.1.12.1.js" type="text/javascript"></script>
<script src="dialog.js" type="text/javascript"></script>
<script src="wechat.js" type="text/javascript"></script>  

<body>  
  <hr/>  
  <table id="banana" style="border-collapse:collapse;bolder:none;background:aliceblue;border: solid 0px #ccc;">  
    <tr style="height:30px;">  
      <td style="width:80px;background: deepskyblue;" rowspan="4" valign="top">
		<div style="width:100px;height:350px;" id="windowTalk">
			
		</div>
	  </td>
	  <td style="width:600px;" id="windowTitle"></td>
      <td width="150px" align="center" style="background: darkturquoise;;">
	    <input style="width:95px;height:25px; padding-left: 2px;border-radius:6px;border:0px;" type="text" id="name" value="" placeholder="请输入姓名" />
		<input style="width:40px;height:30px;border-radius:8px;background:white;border:0px;" type="button" id="onlineBtn" type="1" style="width:100px" value="上线" />
	  </td>  
    </tr>  
    <tr height="400px" valign="top">
	
      <td style="background: aliceblue;">
	    <div style="max-height:350px;overflow-x: visible;overflow: auto;max-width: 720px;" id="talkContent">
			<!--table id="showApple" border="0" style="max-width: 720px;"></table-->  
		</div>
      </td>  
      <td style="background:darkturquoise;;">
		<div id="fgSwitch" style="color:white">
			<div style="float: left;padding-left: 5px;"><a href="#"  class="selected" onclick="fgSwitch('friends')">好友</a></div>
			<div style="float: left;padding-left: 5px;"><a href="#" onclick="fgSwitch('groups')">群组</a></div>
		</div>
        <div id="friends" style="float: left;width: 160px;color:white;"></div>
		<div id="groups" style="float: left;width:160px;display:none;color:white;">
			<div style="float: left;padding-left: 5px;width: 45%;"><a href="#" id="newGroup">新建群</a></div>
			<div style="float: left;width: 45%;"><a href="#" id="joinGroup">加入群</a></div>
			<div style="padding-left: 5px;padding-top:20px;width:155px;">
				<ul id="groupList" style="padding:0px;margin:0px;list-style-type:none;word-break: break-all;"></ul>
			</div>
		</div>
      </td>  
    </tr>  
    <tr style="height:0px;border:1px;background: deepskyblue;">  
      <td></td><td></td>  
    </tr>  
    <tr>
      <td>  
        <textarea id="messageInput"  name="textarea" rows="4" style="width: 99%;background-attachment: fixed; background-repeat: no-repeat; border-style: solid; border-color: #FFFFFF" placeholder="饿贼，棒忒忒"></textarea>
      </td>  
      <td align="center">  
        <input type="button" id="sendBtn" style="width:90px;height:60px;font-size:x-large;border-radius:10px;border:solid 0px;" value="发 送" />  
      </td>  
    </tr>  
  </table>  
</body>  
</html> 